<div id="main_container">
    {$oZoneHeader}
    <div class="main_content">
        {$oZoneTopMenu}
        <div class="center_content">  
            <div class="left_content">
                {$oZoneLeftMenu}
            </div>
           <div class="right_content">
                <form id="createForm" class="Gmodeles" action="{jurl 'essais~BoGamme:save'}" method="POST">
                <input type="hidden" name="essai_id" id="essai_id" value="{$oEssai->ess_id}">
                <h2>TECHNIQUE - Tableau - {$oEssai->ess_zSousTitre}</h2> 
                  <dl>
                    <dt><label>Caracteristique : </label></dt>
                    <dd>
                        <select name="caracteristique" id="caracteristique">
                            {foreach $caracteristique as $item}
                                <option value="{$item->caracter_id}">{$item->caracter_name}</option>
                            {/foreach}
                        </select>
                    </dd>
                  </dl>
                  <dl>
                    <dt><label>Version : </label></dt>
                    <dd>
                        <select name="version" id="version">
                            {foreach $version as $item}
                                <option value="{$item->version_id}">{$item->version_name}</option>
                            {/foreach}
                        </select>
                    </dd>
                  </dl>
                  <dl style="height:auto;">
                    <dt><label>Descriptif : </label></dt>
                    <dd>
                        <textarea name="descriptif" id="descriptif" cols="40" rows="3"></textarea>
                    </dd>
                  </dl>
                  <dl>
                    <dt><label>&nbsp; </label></dt>
                    <dd>
                        <a href="#" id="tab-add">Ajouter </a>
                    </dd>
                  </dl>
                
                <div id="ajaxload" align="left">
                    {$tableau}
                </div>

                <br />

    <a href="{jurl 'essais~BoModele:index', array('iId'=>$oEssai->ess_id)}" id="launchSearch" class="bt_green" style="margin-top:15px;"><span class="bt_green_lft"></span><strong>Retour</strong><span class="bt_green_r"></span></a>

            </form>
         </div><!-- end of right content-->
     </div>   <!--end of center content -->               
        <div class="clear"></div>
   </div> <!--end of main content-->
    
    
    <div class="footer">
    </div>

</div>
<!-- Script autocompletion--> 
{literal}
    <script type="text/javascript">
            $(function(){
                $('#addButton').click(function(){
                    var zUrl = '{/literal}{jurl "essais~BoModeleTechnique:saveCaracteristique", array(), false}{literal}' ;
                    var zChoix = $('#choix').val() ;
                    var essaiId = $('#essai_id').val() ;
                    if (zChoix) {
                        if ($('#rounded-corner > tbody > tr').length < 10) {
                            $.post(zUrl, {zChoix:zChoix, essaiId:essaiId}, function(iResultId){
                                var zUrlZone = '{/literal}{jurl "commun~default:getZone", array("zone"=>"essais~listeCaracteristique"), false}{literal}' ;
                                $('#ajaxload').load(zUrlZone, {id:essaiId}, function(){
                                    $('.ask', $('#ajaxload')).jConfirmAction();
                                    $('#choix').val('');
                                }) ;
                            });
                        } else {
                            alert ('le nombre de choix admis doit etre inférieur à 10') ;
                        }
                    } 
                });

                // Ajouter une ligne dans le tableau
                $('#tab-add').click(function () {
                console.log('lasa zao');
                    var zUrl = '{/literal}{jurl "essais~BoModeleTechnique:saveTableau", array(), false}{literal}' ;
                    var version = $('#version').val() ;
                    var essaiId = $('#essai_id').val() ;
                    var car = $('#caracteristique').val() ;
                    var desc = $('#descriptif').val() ;
                    if (desc) {
                        if ($('#rounded-corner > tbody > tr').length < 10) {
                            $.post(zUrl, {version:version, car:car,desc:desc,essaiId:essaiId}, function(iResultId){
                                var zUrlZone = '{/literal}{jurl "commun~default:getZone", array("zone"=>"essais~tableau"), false}{literal}' ;
                                $('#ajaxload').load(zUrlZone, {id:essaiId}, function(){
                                    $('.ask', $('#ajaxload')).jConfirmAction();
                                }) ;
                            });
                        } else {
                            alert ('le nombre de choix admis doit etre inférieur à 10') ;
                        }
                    } 
                });
            });
     </script>
{/literal}
